<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="测试名称" prop="testName">
        <el-input v-model="queryParams.testName" placeholder="请输入测试名称"
          clearable size="small" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="课程" prop="courseId">
        <el-select v-model="queryParams.courseId" placeholder="请选择课程"
          clearable filterable size="small" style="width: 180px">
          <el-option v-for="dict in courseOption"
            :key="dict.id" :label="dict.courseName" :value="dict.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" placeholder="请选择班级"
          clearable filterable size="small" style="width: 180px">
          <el-option v-for="dict in classOption"
            :key="dict.id" :label="dict.className" :value="dict.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple">删除</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="testList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
<!--      <el-table-column label="序号" align="center" prop="id" width="80"/>-->
      <el-table-column label="测试名称" align="center" prop="name"/>
      <el-table-column label="课程" align="center" prop="courseName"/>
      <el-table-column label="章节" align="center" prop="sectionName"/>
      <el-table-column label="班级" align="center" prop="className"/>
      <el-table-column label="班级人数" align="center" prop="classNum"/>
      <el-table-column label="完成人数" align="center" prop="passNum"/>
      <el-table-column label="未完成人数" align="center" prop="unPassNum"/>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
      <el-table-column label="创建人" align="center" prop="createBy"/>
      <el-table-column label="创建时间" align="center" prop="createTime" width="160"/>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope" >
          <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
            <el-button size="mini" circle type="success"
                       icon="el-icon-edit" @click="handleEdit(scope.row.id)"/>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
            <el-button size="mini" circle type="danger"
                       icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="成绩录入" placement="top-start">
            <el-button size="mini" circle icon="el-icon-document" @click="toTestScore(scope.row)"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total"
      :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>


    <!--新增修改课堂测试弹窗-->
    <el-dialog title="课堂测试编辑" :visible.sync="testDialogVisible"  v-if="testDialogVisible" width="20%">
      <edit-test :testId="editTestId" @editTestSuccess="editTestSuccess"/>
    </el-dialog>

    <!--课堂测试成绩录入弹窗-->
    <el-dialog title="成绩录入" :visible.sync="scoreDialogVisible"  v-if="scoreDialogVisible" width="70%">
      <edit-test-score :testId="editTestId" :classId="editClassId" @editScoreSuccess="editScoreSuccess"/>
    </el-dialog>
  </div>
</template>

<script>
import { getList,delTest } from '@/api/exam/classroomTest'
import EditTest from '@/views/academic/classroomTest/editTest.vue'
import EditTestScore from '@/views/academic/classroomTest/editTestScore.vue'
import { listAllBClass } from '@/api/basedata/bclass'
import { findAllCourse } from '@/api/basedata/bcourse'

export default {
  name: "classroomTest",
  components: { EditTestScore, EditTest},
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        testName: undefined,
        courseId: '',
        classId: '',
      },
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: true,
      // 数据列表
      testList: [],
      // 总条数
      total: 0,
      // 选中数组
      selIds: [],

      //编辑课堂测试id
      editTestId : '',
      //编辑课堂测试弹窗开关
      testDialogVisible : false,

      //成绩录入弹窗
      scoreDialogVisible : false,
      //编辑班级id
      editClassId : '',

      // 班级数据字典
      classOption:[],
      // 课程学期数据字典
      courseOption:[],
    };
  },
  created() {
    listAllBClass().then((result) => {
      this.classOption = result.data
    })
    findAllCourse().then((result) => {
      this.courseOption = result.data
    })
    this.getList();
  },
  methods: {
    /** 课堂测试-分页查询 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then((response) => {
        this.testList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 课堂测试-搜索按钮操作 */
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 课堂测试-重置按钮操作 */
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.handleQuery();
    },
    /** 课堂测试-多选*/
    handleSelectionChange(selection) {
      this.selIds = selection.map(item => Number(item.id))
      this.multiple = !selection.length;
    },
    /** 课堂测试-删除 */
    handleDelete(row) {
      const ids = row.id || this.selIds;
      this.$confirm('是否删除选中测试信息,删除后和该测试相关的数据都将被删除!', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delTest(ids);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 课堂测试-新增 */
    handleAdd() {
      this.editTestId = '';
      this.testDialogVisible = true;
    },
    /** 课堂测试-编辑 */
    handleEdit(id) {
      this.editTestId = id;
      this.testDialogVisible = true;
    },
    /** 课堂测试-新增修改成功回调 */
    editTestSuccess() {
      this.testDialogVisible = false;
      this.getList();
    },
    /** 课堂测试-成绩录入 */
    toTestScore(row) {
      this.editTestId = row.id;
      this.editClassId = row.classId;
      this.scoreDialogVisible = true;
    },
    /** 课堂测试-成绩录入成功回调 */
    editScoreSuccess() {
      this.scoreDialogVisible = false;
      this.getList();
    }
  },
};
</script>
